<template>
  <div class="main wrap DesignProgress">
    <el-tabs v-model="activeClassTimeIdx"
     @tab-remove="delClassTime"
     @tab-add="addClassTime"
     editable  class="classify-tabs" @tab-click="changeDetailTabs">

      <el-tab-pane
        v-for="(period , i) in programDatas.resList"
        :key="i"
        :label="'课时'+ (i+1)"
        :name="(i+1).toString()"
      >
      </el-tab-pane>
<!--      <el-tab-pane lazy label="添加课时" :key='programData.id+"1"'  name="添加课时">
      </el-tab-pane> -->
 </el-tabs>
<!-- <teaching-plan   :list="periodItem.resTeaching" :teachingDesignResId='periodItem.id'/> -->

     <el-tabs tab-position="left" v-model="actLeft" v-if="periodItem">

                <el-tab-pane label="教案" >
      				  <teaching-plan v-if="isMounted[Number(actLeft)] ||actLeft==='0'"
                :list="periodItem.resTeaching"
                :teachingDesignResId='periodItem.id'/>
                </el-tab-pane>
                <el-tab-pane label="课件" >

                  <courseware v-if="isMounted[Number(actLeft)] || actLeft==='1'"  :list="periodItem.resCoursewareList" :teachingDesignResId='periodItem.id' />
                </el-tab-pane>
                <el-tab-pane label="课堂实录">
                  <course-video  v-if="isMounted[Number(actLeft)] ||actLeft==='2'" :list="periodItem.resCourseVideo" :teachingDesignResId='periodItem.id'/>
                </el-tab-pane>
                <el-tab-pane   label="教学反思">
                  <teaching-reflection v-if="isMounted[Number(actLeft)] ||actLeft==='4'"  :list="periodItem.resTeachingReflection" :teachingDesignResId='periodItem.id'/>
                </el-tab-pane>

              </el-tabs>

  </div>
</template>
<script>

import TeachingPlan from './TeachingPlan'
import Courseware from './Courseware'
import CourseVideo from './CourseVideo'
import StudentPlan from './StudentPlan'
import TeachingReflection from './TeachingReflection'


import { getPersonPrepareLessonDetail, addClassTime,findImportTagsList,deleteClassTime} from '@/api/personPrepareLesson'
// import {  mapMutations } from 'vuex'
export default {
  name: 'YesProgram',
  components: {
    TeachingPlan,
    StudentPlan,
    Courseware,
    CourseVideo,
    TeachingReflection
  },
  props: {
    programData: {
      type: Object,
      default:()=>{
        return {}
      }
    }
  },
  data() {
    return {
      isMounted:[],
      activeClassTimeIdx: '1',
      activeClass:'',
      actLeft:'0',
      programDatas:this.programData
      //addListInt: require('../initLessonTime').default
    }
  },
  watch:{
    actLeft(Idx){
      this.isMounted[Number(Idx)] = true
    },
    activeClassTimeIdx(Idx){
     this.activeClass = this.activeClassTimeIdx
      console.log("）",Idx)

    }
  },
 mounted() {

 },
 computed:{
   periodItem(){
     var list = {}
     if(this.programData.resList){
      list = this.programData.resList[Number(this.activeClassTimeIdx) - 1]
     }
     return list
   },
   teachingDesignId() {
     return this.$store.state.uploadLessonPlan.teachingPlanId
   },
 },
  methods: {
    // ...mapMutations({
    //   setId: 'SET_TEACHING_PLAN_ID'
    // }),
   async delClassTime(ind){
     var index = Number(ind-1)
     let resId = this.programData.resList[index].id
     let res = await deleteClassTime({resId,teachingDesignId:this.teachingDesignId})
     //res.code ==='1'?this.programData.resList.splice(index,1):''
     this.programDatas.resList.splice(index,1)
    },
    async addClassTime(){

      let res = await addClassTime(this.programData.id)
      var addListInt = require('../initLessonTime').default
      addListInt.id = res.data
      this.programDatas.resList.push(addListInt)
       this.activeClassTimeIdx = String(this.programDatas.resList.length-1)
      this.$set(this.programDatas,'resList',this.programDatas.resList)
      console.log("classTimeIdx",this.programDatas.resList)
    },
    changeDetailTabs(tab,e) {
      var that = this
      getPersonPrepareLessonDetail({id:this.teachingDesignId}).then((res)=>{
        //var indexId =that.programData.resList[Number(tab.name)].id
        var indList =  res.data.resList.filter(item=>item.id===that.programDatas.id)
         if(indList){
           var indWaysList = indList[0]
           that.programDatas = indWaysList
  
          // this.$set(that,'programData',indWaysList)
         }
      })
      console.log('changeDetailTabs',tab.name)
    }
  }
}
</script>
<style lang="scss">
	.DesignProgress{
    /deep/.container{padding:2vw;}
		.classify-tabs >.el-tabs__header{
		  [class*='el-tabs__nav']{
		    line-height: 60px;
		  }
      .el-tabs__new-tab{
          color: #F56C6C;
              //background: #F56C6C;
              padding:5px 4px;
              width: 25px;
              height:calc(100% - 2px);
              line-height: 1.5;
              border-radius: 5px;
              border:1px solid  #F56C6C;
        }
		  .el-tabs__nav {

		    >div.el-tabs__item {
		      // &:last-child


		    }
		  }

		}
	}

</style>
<style lang="scss" scoped>
.main{
  margin-bottom: 24px ;
  width: 1600px;
  /deep/.classify-tabs > .el-tabs__header{
    padding: 0 0 0 40px;
    border-bottom: 1px solid #e2e2e2;
  }
  /deep/.el-tabs__item.is-left.is-active{
    background: #E6F5ED;
  }
   /deep/.el-tabs__nav-scroll{
    padding:0 2vw;
  }
  /deep/.el-tabs__item{
    width: auto;
    min-width:70px;

    text-align: center;
  }
  /deep/.el-tabs__active-bar{
    display: none;
  }
}

</style>
